'use client'
import {useState, useEffect} from 'react';
import {Movie} from "@/app/types";
import SearchBar from "@/components/SearchBar";
import MovieCard from "@/components/MovieCard";


const Home = () => {
    const [movies, setMovies] = useState<Movie[]>([]);
    const [searchTerm, setSearchTerm] = useState('');


    useEffect(() => {
        const fetchMovies = async () => {
            const response = await fetch('/api/movies/getMovieList'); // Replace with your API endpoint
            const data: Movie[] = await response.json();
            setMovies(data);
        };
        fetchMovies();
    }, []);

    const filteredMovies = movies.filter(movie => {

            return movie.title.toLowerCase().includes(searchTerm.toLowerCase())
        }
    );
    return (
        <div className="container mx-auto p-4">

            <div className=" text-5xl mb-5 w-full text-center" >Online Movie Rating</div>

            <SearchBar searchTerm={searchTerm} setSearchTerm={(e) => setSearchTerm(e)}/>

            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {filteredMovies.map(movie => (
                    <MovieCard movie={movie}/>
                ))}
            </div>
        </div>
    );
};

export default Home;